<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div style="float:right;margin: 10px;">
                            <a id="btn-export" class="layui-btn">导出</a>
                        </div>
                        <form class="layui-form" action="#" lay-filter="report-form">
                            <input type="hidden" name="id">
                            <div class="layui-row">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">报表周期</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="period" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">开始日期</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="startDate" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">截止日期</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="endDate" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">创建时间</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="createTime" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <table class="layui-hide" id="water-report-item-table" lay-filter="water-report-item-table">
                        </table>
                        <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="photo">照片</a>
                    </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="water-report-item-form">
    <div class="layui-card">
        <div class="layui-card-header">用水报表项详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="water-report-item-form">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">*名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="meterName" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">水表直径</label>
                    <div class="layui-input-block">
                        <input type="text" name="diameter" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*倍率</label>
                    <div class="layui-input-block">
                        <input type="number" name="ratio" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上周数量(吨)</label>
                    <div class="layui-input-block">
                        <input type="number" name="lastAmount" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">本周数量(吨)</label>
                    <div class="layui-input-block">
                        <input type="number" name="thisAmount" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">实用数量(吨)</label>
                    <div class="layui-input-block">
                        <input type="number" name="useAmount" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">抄表人</label>
                    <div class="layui-input-block">
                        <input type="text" name="reader" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">抄表时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="readTime" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input name="stateText" class="layui-input" readonly>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>
    <script src="/layui/layui.js"></script>
    <script src="/js/common.js"></script>
    <script>
        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laydate'], function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var admin = layui.admin;
            var laydate = layui.laydate;
            var id = getParam('id');
            var popupIndex;

            loadForm(id);

            function loadForm(id) {
                $.get('water-reports/' + id, function (result) {
                    form.val('report-form', result.data);
                });
            }

            table.render({
                elem: '#water-report-item-table',
                url: 'water-report-items',
                skin: 'line',
                limit: 10000,
                cols: [[
                    { type: 'checkbox' },
                    {
                        title: '序号', width: 60, templet: function (d) {
                            return d.LAY_TABLE_INDEX + 1;
                        }
                    },
                    { field: 'meterName', title: '名称', width: 180 },
                    { field: 'diameter', title: '水表直径' },
                    { field: 'ratio', title: '倍率', width: 100 },
                    { field: 'lastAmount', title: '上周数量(吨)' },
                    { field: 'thisAmount', title: '本周数量(吨)' },
                    { field: 'useAmount', title: '实用数量(吨)' },
                    { field: 'reader', title: '抄表人' },
                    { field: 'readTime', title: '抄表时间' },
                    { field: 'stateText', title: '状态', width: 80 },
                    { fixed: 'right', title: '操作', toolbar: '#toolbar-operation', width: 150 }
                ]],
                where: {
                    reportId: id
                }
            });

            function showWaterReportItemForm() {
                popupIndex = admin.popupRight({
                    area: '480px',
                    success: function () {
                        var formHtml = $('#water-report-item-form').html();
                        $('#' + this.id).html(formHtml);
                        form.render();
                        laydate.render({
                            elem: '#read-time'
                        });
                    }
                });
                return popupIndex;
            }

            function closePopupForm() {
                if (popupIndex) {
                    layer.close(popupIndex);
                }
            }

            $("#btn-export").on('click', function () {
                let url = 'water-reports/export?id=' + id;
                window.open(url);
            });

            table.on('tool(water-report-item-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    showWaterReportItemForm();
                    form.val('water-report-item-form', data);
                } else if (obj.event === 'photo') {
                    if (data.imgs) {
                        var images = data.imgs.split(',');
                        var photos = { data: [] };
                        for (var i in images) {
                            photos.data.push({
                                src: '/img/' + images[i]
                            });
                        }
                        layer.photos({
                            photos: photos
                        });
                    } else {
                        layer.msg('无现场照片');
                    }
                }
            });

            form.on('submit(form-submit)', function (data) {
                $.ajax({
                    url: 'water-report-items',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('water-report-item-table');
                        } else {
                            layer.msg('提交失败');
                            console.error('提交失败');
                        }
                    }
                });
                closePopupForm();
                return false;
            });

        });
    </script>
    <div id="layer-images"></div>
</body>

</html>